<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML 和静态资源</title>
	</head>
	<body>
		<!-- HTML: -->
		<!-- Index文件 -->
		<!-- 
		 public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。
		 另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS 文件的资源链接。
		 -->
		 
		<!-- 插值 -->
		<!-- 
		 因为 index 文件被用作模板，所以你可以使用 lodash template(https://lodash.com/docs/4.17.15#template) 语法插入内容
			- <%= VALUE %> 用来做不转义插值
			- <%- VALUE %> 用来做 HTML 转义插值
			- <% expression %> 用来描述 JavaScript 流程控制
		 -->
		
		<!-- Preload -->
		<!-- 
		 <link rel="preload"> 是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。
		 -->
		 
		<!-- Prefetch -->
		<!-- 
		 <link rel="prefetch"> 是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
		 -->
		 
		<!-- 处理静态资源 -->
		<!-- 
		 静态资源可以通过两种方式进行处理:
			- 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
			- 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
		 -->
		 
		<!-- 从相对路径导入 -->
		<!-- 
		 当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。
		 在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
		 
		 如：例如，url(./image.png) 会被翻译为 require('./image.png')，而：
		 <img src="./image.png">
		 将会被编译到：
		 h('img', { attrs: { src: require('./image.png') }})
		 -->
		 
		<!-- URL 转换规则 -->
		<ul>
			<li>如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。</li>
			<li>如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。</li>
			<li>如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：</li>
			<li>如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)</li>
		</ul>
		
		<!-- public 文件夹 -->
		<!-- 
		任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
		好处：
			- 任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
			- 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
			- 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
		 -->
		 
		<!-- 何时使用 public 文件夹 -->
		<!-- 
			- 你需要在构建输出中指定一个文件的名字。
			- 你有上千个图片，需要动态引用它们的路径。
			- 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。
		 -->
	</body>
</html>
